<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>api-tool</title>

    <style>

        html, body {
            margin: 0;
        }

        .dashboard {
            width: 100%;
            height: 800px;
            display: flex;
            font-size: 14px;
        }

        .dashboard .left {
            width: 340px;
            height: 100%;
            display: flex;
            border-right: 1px solid #b9b5b5;
        }

        .dashboard .left .left-mini {
            width: 80px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgb(249, 250, 251);
        }

        .dashboard .left .left-mini .mini-item {
            cursor: pointer;
            width: 70px;
            height: 60px;
            margin-top: 8px;
            border-radius: 8px;
        }

        .dashboard .left .left-mini .mini-item:hover {
            background: #dddddd;

            .mini-item-text {
                color: blue;
            }
        }

        .dashboard .left .left-mini .mini-item .mini-item-icon {
            width: 100%;
            height: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dashboard .left .left-mini .mini-item .mini-item-icon svg {
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dashboard .left .left-mini .mini-item .mini-item-text {
            width: 100%;
            height: 40%;
            font-size: 12px;
            display: flex;
            justify-content: center;
            color: grey;
        }

        .dashboard .left .left-menu {
            width: 260px;
            height: 100%;
        }


        .dashboard .left .left-menu .left-search {
            width: 100%;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .dashboard .left .left-menu .left-search svg {
            position: absolute;
            width: 16px;
            height: 16px;
            left: 16px;
        }

        .dashboard .left .left-menu .left-search input {
            padding-left: 30px;
            width: 80%;
            height: 36px;
            border-radius: 5px;
            border: none;
            background-color: #f7f7f7;
            outline-style: none;
        }

        .dashboard .left .left-menu .left-collection {
            width: 100%;
            height: 300px;
            position: relative;
        }

        .dashboard .left .left-menu .left-collection .api-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            width: 100%;
            height: 40px;
        }

        .custom-api-item::after {
            content: "";
            position: absolute;
            width: 4px;
            height: 40px;
            background: red;
            right: 0px;
        }

        .dashboard .left .left-menu .left-collection .api-item .api-item-icon-get {
            padding-left: 10px;
            display: flex;
            align-items: center;
            width: 50px;
            height: 100%;
            color: #15ea15;
        }

        .dashboard .left .left-menu .left-collection .api-item .api-item-icon-post {
            padding-left: 10px;
            display: flex;
            align-items: center;
            width: 50px;
            height: 100%;
            color: #eaea0b;
        }

        .dashboard .left .left-menu .left-collection .api-item .api-item-icon-put {
            padding-left: 10px;
            display: flex;
            align-items: center;
            width: 50px;
            height: 100%;
            color: blue;
        }

        .dashboard .left .left-menu .left-collection .api-item .api-item-icon-delete {
            padding-left: 10px;
            display: flex;
            align-items: center;
            width: 50px;
            height: 100%;
            color: red;
            margin-right: 8px;
        }

        .dashboard .left .left-menu .left-collection .api-item .api-item-text {
            width: 200px;
            color: #198710;
        }

        .dashboard .right {
            width: calc(100vw - 240px);
            height: 100%;
            position: relative;
        }

        .dashboard .right .right-top {
            padding-left: 10px;
            width: 100%;
            height: 40px;
            display: flex;
            padding-top: 9px;
        }

        .dashboard .right .right-top .right-top-tab {
            border-radius: 8px 8px 0 0;
            margin-left: 6px;
            width: 200px;
            height: 30px;
            background: #0a3b70;
            cursor: pointer;
            display: flex;

            .tab-icon-get {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 60px;
                color: #15ea15;
            }

            .tab-icon-post {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80px;
                color: orange;
            }

            .tab-icon-put {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80px;
                color: blue;
            }

            .tab-icon-delete {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80px;
                margin-left: 4px;
                margin-right: 4px;
                color: red;
            }

            .tab-text {
                width: 180px;
                display: flex;
                align-items: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                color: white;
            }

            .tab-close {
                width: 30px;
                position: relative;

                .tab-close-x {
                    top: -2px;
                    right: 5px;
                    color: white;
                    position: absolute;
                }
            }
        }

        .dashboard .right .right-top .right-top-tab:hover {
            background-color: white;
            border: #1890ff 1px solid;

            .tab-text {
                color: blue !important;
            }

            .tab-close-x {
                color: black;
            }

        }

        .dashboard .right .right-send {
            width: 100%;
            height: 60px;
            display: flex;
        }

        .dashboard .right .right-send .send-type {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100%;
        }

        .dashboard .right .right-send .send-type select {
            outline-style: none;
            border-color: blue;
            width: 70%;
            height: 30px;
            border-radius: 6px;
            color: orangered;
        }

        .dashboard .right .right-send .send-input {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 642px;
            height: 100%;
        }

        .dashboard .right .right-send .send-input input {
            width: 100%;
            height: 24px;
            border-radius: 5px;
            padding: 6px 6px 6px 10px;
            border: none;
            background-color: #f7f7f7;
            outline-style: none;
        }

        .dashboard .right .right-send .send-do {
            margin-left: 12px;
            width: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .dashboard .right .right-send .send-do svg {
            z-index: 100;
            left: 8px;
            position: absolute;
            width: 18px;
            height: 18px;
        }

        .dashboard .right .right-send .send-do button {
            padding-left: 20px;
            cursor: pointer;
            width: 100%;
            height: 32px;
            border: none;
            background: blue;
            color: white;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            outline: none;
        }

        .dashboard .right .right-send .send-do button:hover {
            background: #1890ff;
        }

        .dashboard .right .right-select {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
        }

        .dashboard .right .right-select .select-item {
            cursor: pointer;
            color: grey;
            margin-left: 80px;
            width: max-content;
            height: 60%;
            position: relative;
        }

        .dashboard .right .right-request {
            width: 100%;
            height: 300px;
        }

        /* params */
        .dashboard .right .right-request .params {
            width: 816px;
            height: 100%;
            padding-left: 20px;
            padding-top: 13px;
        }

        .dashboard .right .right-request .params table {
            border-collapse: collapse;
            width: 100%;
        }

        .dashboard .right .right-request .params table th, table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .dashboard .right .right-request .params table th, table td input {
            padding-left: 8px;
            outline-style: none;
            border-radius: 4px;
            border: none;
            height: 26px;
            font-size: 14px;
        }

        .dashboard .right .right-request .params table th {
            background-color: #f2f2f2;
            font-weight: bold;
            font-size: 1em;
        }

        .dashboard .right .right-request .params table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .dashboard .right .right-request .params table tr:hover {
            background-color: #dbdbdb;
        }

        /* authorization */
        .dashboard .right .right-request .authorization {
            width: 816px;
            height: 60px;
            padding-left: 20px;
            display: flex;
            align-items: center;
        }

        .dashboard .right .right-request .authorization .auth-type {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
        }

        .dashboard .right .right-request .authorization .auth-type-title {
            width: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: grey;
        }

        .dashboard .right .right-request .authorization .auth-type-select {
            width: 140px;
            display: flex;
            align-items: center;
        }

        .dashboard .right .right-request .authorization .auth-type-select select {
            outline-style: none;
            border-color: blue;
            width: 100%;
            height: 30px;
            border-radius: 6px;
            color: orangered;
        }

        .dashboard .right .right-request .authorization .auth-token {
            display: flex;
            align-items: center;
            width: 600px;
        }

        .dashboard .right .right-request .authorization .auth-token-title {
            width: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: grey;
        }

        .dashboard .right .right-request .authorization .auth-token-value {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dashboard .right .right-request .authorization .auth-token-value input {
            width: 100%;
            height: 24px;
            border-radius: 5px;
            padding: 6px 6px 6px 10px;
            border: none;
            background-color: #f7f7f7;
            outline-style: none;
        }

        /* request-body */
        .dashboard .right .right-request .request-body {
            width: 816px;
            height: 100%;
            padding-left: 20px;
            position: relative;
        }

        .dashboard .right .right-request .request-body .request-type-select {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .dashboard .right .right-request .request-body .request-type-select .request-type-select-item {
            margin-left: 20px;
            width: max-content;
            height: 20px;
            color: grey;
            font-size: 12px;
            cursor: pointer;
            border-radius: 8px;
            padding: 2px 6px 0px 6px;
        }

        .dashboard .right .right-request .request-body .request-type-select .request-type-select-item:hover {
            color: blue;
        }

        .dashboard .right .right-request .request-body .request-type-json {
            overflow-y: scroll;
            width: 95%;
            height: 260px;
            padding: 20px;
            color: white;
            background: #0a3b70;
        }

        .dashboard .right .right-request .request-body .request-type-json-copy {
            cursor: pointer;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 56px;
            right: 60px;
        }

        .dashboard .right .right-request .request-body .request-type-json-copy svg {
            width: 24px;
            height: 24px;
        }

        .dashboard .right .right-request .request-body .request-type-json-format {
            cursor: pointer;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 56px;
            right: 30px;
        }

        .dashboard .right .right-request .request-body .request-type-json-format svg {
            width: 20px;
            height: 20px;
        }

        /* request-header */
        .dashboard .right .right-request .request-header {
            width: 816px;
            height: 120px;
            padding-left: 20px;
            padding-top: 13px;
        }

        .dashboard .right .right-request .request-header table {
            border-collapse: collapse;
            width: 100%;
        }

        .dashboard .right .right-request .request-header table th, table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .dashboard .right .right-request .request-header table th, table td input {
            padding-left: 8px;
            outline-style: none;
            border-radius: 4px;
            border: none;
            height: 26px;
            font-size: 14px;
        }

        .dashboard .right .right-request .request-header table th {
            background-color: #f2f2f2;
            font-weight: bold;
            font-size: 1em;
        }

        .dashboard .right .right-request .request-header table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .dashboard .right .right-request .request-header table tr:hover {
            background-color: #dbdbdb;
        }

        /* request-settings */
        .dashboard .right .right-request .request-settings {
            width: 816px;
            height: 120px;
            padding-left: 20px;
            padding-top: 13px;
            display: flex;
            justify-content: center;
        }

        .dashboard .right .right-request .request-settings .setting-ssl {
            width: 400px;
            height: 30px;
            display: flex;
            align-items: center;
        }

        .dashboard .right .right-request .request-settings .setting-ssl .setting-ssl-title {
            width: 100px;
            color: grey;
        }

        .dashboard .right .right-request .request-settings .setting-ssl .setting-ssl-radio {
            width: 300px;
        }

        /* global-tip */
        .dashboard .right .global-tip {
            left: 26%;
            top: 6px;
            position: absolute;
            width: 200px;
            height: 30px;
            border-radius: 8px;
            display: none;
            color: grey;
            padding: 10px 8px 0px 12px;
            background: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
            pointer-events: all;
        }

    </style>

</head>

<body>

<div class="dashboard">
    <div class="left">
        <div class="left-mini">
            <div id="mini-item-01" class="mini-item">
                <div class="mini-item-icon">
                    <svg t="1699775285047" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="6369" width="200" height="200">
                        <path d="M821.632 674.56c9.408-4.352 11.904-4.544 20.8-0.128l76.8 37.056c19.392 9.408 19.392 24.704-0.256 34.112l-370.816 179.072c-9.6 4.608-22.592 7.04-35.264 7.04-12.736 0-25.6-2.24-35.328-7.04L106.752 745.6c-19.456-9.408-19.456-24.768 0-34.112l73.216-35.328c11.84-5.76 15.552-5.76 28.672 0.64 12.096 5.952 269.184 129.92 269.184 129.92 9.6 4.608 22.592 7.04 35.2 7.04 12.8 0 25.472-2.432 35.328-6.976 0 0 263.936-127.744 273.28-132.16z m0-217.6c9.408-4.352 11.904-4.608 20.8-0.192l76.8 37.056c19.456 9.408 19.456 24.768-0.512 33.92l-370.752 179.072c-9.664 4.672-22.592 7.04-35.328 7.04-12.672 0-25.6-2.368-35.264-7.04L106.56 527.872c-19.456-9.408-19.456-24.832 0-34.24l73.216-35.2c11.84-5.76 15.552-5.76 28.736 0.64 12.032 5.888 269.056 129.92 269.056 129.92 9.664 4.608 22.592 7.04 35.328 7.04 12.672 0 25.408-2.432 35.2-7.04 0 0 264.192-127.552 273.536-131.968zM513.088 90.112c12.16-0.192 24.192 2.24 35.328 7.04l370.752 179.008c19.52 9.472 19.52 24.832 0 34.24L548.352 489.472c-9.6 4.608-22.528 7.04-35.264 7.04-12.736 0-25.6-2.432-35.328-7.04L107.008 310.4c-19.52-9.408-19.52-24.768 0-34.176l370.816-179.072c9.6-4.608 22.592-7.04 35.2-7.04z"
                              fill="#FF9600" p-id="6370"></path>
                    </svg>
                </div>
                <div class="mini-item-text">接口管理</div>
            </div>
            <div id="mini-item-02" class="mini-item">
                <div class="mini-item-icon">
                    <svg t="1699775822881" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="8577" width="200" height="200">
                        <path d="M263.687 557.006c-29.996 33.126-55.392 36.634-76.116 117.924-14.232 66.619-5.456 141.453 27.393 183.253 31.851-11.73 57.782-33.311 105.004-45.183 32.103-10.708 71.016-7.999 101.973-12.398L263.687 557.006z m497.212 0c29.996 33.126 55.392 36.634 76.117 117.924 14.232 66.619 5.459 141.453-27.392 183.253-31.851-11.73-57.78-33.311-105.006-45.183-32.1-10.708-71.014-7.999-101.97-12.398l158.251-243.596z"
                              fill="#FFC8B5" p-id="8578"></path>
                        <path d="M730.278 245.183C656.395 133.314 523.032 76 523.032 76S374.27 135.543 309.44 251.525c-35.094 56.157-46.524 142.451-46.524 211.479 0 163.88 164.952 375.192 164.952 375.192h183.986s160.722-209.76 160.722-374.133c0.2-73.704 5.452-157.155-42.298-218.88z m-212.4 264.345c-61.89 0-112.083-50.176-112.083-112.081 0-61.909 50.193-112.085 112.083-112.085S629.96 335.538 629.96 397.447c0 61.907-50.193 112.08-112.083 112.08z"
                              fill="#FC5A22" p-id="8579"></path>
                        <path d="M517.878 345.007c-30.96 0-56.04 25.096-56.04 56.042s25.08 56.043 56.04 56.043c30.962 0 56.042-25.097 56.042-56.043 0-30.948-25.08-56.042-56.042-56.042zM510.66 941.221l-67.916-70.265a9.035 9.035 0 0 1 6.497-15.315h137.702a9.035 9.035 0 0 1 6.41 15.402l-69.785 70.266a9.035 9.035 0 0 1-12.908-0.088z"
                              fill="#FFC8B5" p-id="8580"></path>
                    </svg>
                </div>
                <div class="mini-item-text">项目设置</div>
            </div>
            <div id="mini-item-03" class="mini-item">
                <div class="mini-item-icon">
                    <svg t="1699775879374" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="11721" width="200" height="200">
                        <path d="M510.6176 54.9888a460.0832 460.0832 0 1 0 460.032 460.0832 460.0832 460.0832 0 0 0-460.032-460.0832z m253.0816 435.712l-182.9376 182.7328a30.1568 30.1568 0 0 1-51.456-21.3504v-77.6704c-129.792 5.12-191.3856 56.32-239.0016 104.6016a35.84 35.84 0 0 1-25.6 10.6496 35.84 35.84 0 0 1-17.5104-4.5568 35.84 35.84 0 0 1-17.6128-39.5776c57.3952-245.76 236.8512-284.9792 299.52-291.1232V279.8592a30.1568 30.1568 0 0 1 51.2-21.4016l182.9376 181.248a35.84 35.84 0 0 1 0 51.2z"
                              fill="#FF623E" p-id="11722"></path>
                        <path d="M580.5056 368.64a35.84 35.84 0 0 1-34.6624 35.84c-45.056 1.5872-187.136 21.504-250.88 201.0112 55.552-45.3632 129.024-81.3056 249.4464-82.7904a35.84 35.84 0 0 1 36.352 35.84v42.5472L716.8 465.3056l-136.192-135.0144z"
                              fill="#FF623E" p-id="11723"></path>
                    </svg>
                </div>
                <div class="mini-item-text">在线分享</div>
            </div>
        </div>
        <div class="left-menu">
            <div class="left-search">
                <svg t="1699672925806" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4024" width="200" height="200">
                    <path d="M1007.547733 937.5744l-190.190933-185.821867A445.098667 445.098667 0 0 0 930.474667 454.656c0-121.378133-48.401067-235.52-136.192-321.3312A467.5584 467.5584 0 0 0 465.442133 0.2048c-124.245333 0-240.981333 47.3088-328.9088 133.12A446.327467 446.327467 0 0 0 0.341333 454.656c0 121.378133 48.401067 235.52 136.192 321.3312a467.5584 467.5584 0 0 0 328.9088 133.12 468.650667 468.650667 0 0 0 280.507734-91.886933l192.375466 187.938133c9.557333 9.352533 22.050133 14.062933 34.6112 14.062933a49.3568 49.3568 0 0 0 34.6112-14.062933 47.104 47.104 0 0 0 0-67.584zM98.235733 454.656c0-197.8368 164.727467-358.741333 367.2064-358.741333 202.410667 0 367.138133 160.904533 367.138134 358.741333 0 197.8368-164.727467 358.8096-367.138134 358.8096-202.478933 0-367.2064-160.9728-367.2064-358.8096z"
                          fill="#999999" p-id="4025"></path>
                </svg>
                <input placeholder="请输入关键字查询"/>
            </div>
            <div class="left-collection">
                <div id="api-item-01" class="api-item">
                    <div class="api-item-icon-get">GET</div>
                    <div class="api-item-text">http://localhost:8080/get</div>
                </div>
                <div id="api-item-02" class="api-item">
                    <div class="api-item-icon-post">POST</div>
                    <div class="api-item-text">http://localhost:8080/post</div>
                </div>
                <div id="api-item-03" class="api-item">
                    <div class="api-item-icon-put">PUT</div>
                    <div class="api-item-text">http://localhost:8080/put</div>
                </div>
                <div id="api-item-04" class="api-item">
                    <div class="api-item-icon-delete">DELETE</div>
                    <div class="api-item-text">http://localhost:8080/delete</div>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div id="right-top" class="right-top">
            <div id="right-top-tab-01" class="right-top-tab">
                <div class="tab-icon-get">GET</div>
                <div class="tab-text">http://localhost:8080/get</div>
                <div class="tab-close">
                    <div id="tab-close-x-01" class="tab-close-x">x</div>
                </div>
            </div>
            <div id="right-top-tab-02" class="right-top-tab">
                <div class="tab-icon-post">POST</div>
                <div class="tab-text">http://localhost:8080/post</div>
                <div class="tab-close">
                    <div id="tab-close-x-02" class="tab-close-x">x</div>
                </div>
            </div>
            <div id="right-top-tab-03" class="right-top-tab">
                <div class="tab-icon-put">PUT</div>
                <div class="tab-text">http://localhost:8080/put</div>
                <div class="tab-close">
                    <div id="tab-close-x-03" class="tab-close-x">x</div>
                </div>
            </div>
            <div id="right-top-tab-04" class="right-top-tab">
                <div class="tab-icon-delete">DELETE</div>
                <div class="tab-text">http://localhost:8080/delete</div>
                <div class="tab-close">
                    <div id="tab-close-x-04" class="tab-close-x">x</div>
                </div>
            </div>
        </div>
        <div class="right-send">
            <div class="send-type">
                <select>
                    <option style="color: #15ea15" value="GET">GET</option>
                    <option style="color: orange" value="POST">POST</option>
                    <option style="color: blue" value="PUT">PUT</option>
                    <option style="color: red" value="DELETE">DELETE</option>
                </select>
            </div>
            <div class="send-input">
                <input placeholder="请输入接口路径，如 http://localhost:8080/hello"/>
            </div>
            <div class="send-do">
                <svg t="1699799302130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5036" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF8B38" p-id="5037"></path><path d="M230.5664 569.3568l114.1888 46.976a25.6 25.6 0 0 0 26.4704-4.3008L672 352.448 465.1136 592.8832a25.6 25.6 0 0 0 11.712 41.1136l141.184 44.5056a51.2 51.2 0 0 0 65.5616-38.5792l75.7376-370.7904a12.8 12.8 0 0 0-18.4704-13.9136l-512.384 267.776a25.6 25.6 0 0 0 2.112 46.3616z" fill="#FFFFFF" p-id="5038"></path><path d="M446.0544 668.0576l68.416 50.3552a12.8 12.8 0 0 1 1.28 19.52l-91.456 88.0896 1.3696-147.776a12.8 12.8 0 0 1 20.3904-10.1888z" fill="#FFFFFF" fill-opacity=".703" p-id="5039"></path></svg>
                <button id="send-do-button">发送</button>
            </div>
        </div>
        <div class="right-select">
            <div id="select-item-01" class="select-item">params</div>
            <div id="select-item-02" class="select-item">Authorization</div>
            <div id="select-item-03" class="select-item">Header</div>
            <div id="select-item-04" class="select-item">Body</div>
            <div id="select-item-05" class="select-item">Settings</div>
        </div>
        <div class="right-request">
            <div style="display: none" id="params" class="params">
                <table>
                    <tr>
                        <th></th>
                        <th>参数名</th>
                        <th>示例值</th>
                        <th>说明</th>
                    </tr>

                    <tr>
                        <td>
                            <input type="checkbox" checked/>
                        </td>
                        <td>
                            <input value="username"/>
                        </td>
                        <td>
                            <input value="小e"/>
                        </td>
                        <td>
                            <input value="用户名称"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <input type="checkbox" checked/>
                        </td>
                        <td>
                            <input value="email"/>
                        </td>
                        <td>
                            <input value="abc@163.com"/>
                        </td>
                        <td>
                            <input value="邮箱"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <input type="checkbox" checked/>
                        </td>
                        <td>
                            <input value="mobile"/>
                        </td>
                        <td>
                            <input value="13610012178"/>
                        </td>
                        <td>
                            <input value="手机号码"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <input type="checkbox" checked/>
                        </td>
                        <td>
                            <input value="address"/>
                        </td>
                        <td>
                            <input value="广东省深圳市"/>
                        </td>
                        <td>
                            <input value="居住地址"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="display: none" id="authorization" class="authorization">
                <div class="auth-type">
                    <div class="auth-type-title">类型</div>
                    <div class="auth-type-select">
                        <select>
                            <option style="color: blue" value="Bearer Token">Bearer Token</option>
                            <option style="color: blue" value="JWT">JWT</option>
                            <option style="color: blue" value="Basic Auth">Basic Auth</option>
                            <option style="color: blue" value="Digest Auth">Digest Auth</option>
                            <option style="color: blue" value="OAuth 1.0">OAuth 1.0</option>
                        </select>
                    </div>
                </div>
                <div class="auth-token">
                    <div class="auth-token-title">Token</div>
                    <div class="auth-token-value">
                        <input placeholder="请输入 Token 值"/>
                    </div>
                </div>
            </div>
            <div style="display: none" id="request-body" class="request-body">
                <div class="request-type-select">
                    <div id="request-type-select-item-01" class="request-type-select-item">
                        none
                    </div>
                    <div id="request-type-select-item-02" class="request-type-select-item">
                        form-data
                    </div>
                    <div id="request-type-select-item-03" class="request-type-select-item">
                        x-www-form-urlencoded
                    </div>
                    <div id="request-type-select-item-04" class="request-type-select-item">
                        json
                    </div>
                    <div id="request-type-select-item-05" class="request-type-select-item">
                        xml
                    </div>
                    <div id="request-type-select-item-06" class="request-type-select-item">
                        raw
                    </div>
                    <div id="request-type-select-item-07" class="request-type-select-item">
                        binary
                    </div>
                    <div id="request-type-select-item-08" class="request-type-select-item">
                        GraphQL
                    </div>
                </div>
                <div id="request-type-json" contenteditable="true" class="request-type-json">

                </div>
                <div id="copy" class="request-type-json-copy">
                    <svg t="1699780172832" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="22005" width="200" height="200">
                        <path d="M795.648 762.0096H419.1744c-80.8448 0-146.432-65.536-146.432-146.432V239.104c0-80.8448 65.536-146.432 146.432-146.432h376.4736c80.8448 0 146.432 65.536 146.432 146.432v376.4736c0 80.896-65.536 146.432-146.432 146.432z"
                              fill="#FFDF99" p-id="22006"></path>
                        <path d="M604.8256 939.776H228.352c-80.8448 0-146.432-65.536-146.432-146.432V416.9216c0-80.8448 65.536-146.432 146.432-146.432h376.4736c80.8448 0 146.432 65.536 146.432 146.432v376.4736c-0.0512 80.8448-65.5872 146.3808-146.432 146.3808z"
                              fill="#FF5D50" p-id="22007"></path>
                        <path d="M552.96 553.9328H467.7632V468.7872c0-28.2624-22.9376-51.2-51.2-51.2s-51.2 22.9376-51.2 51.2v85.1456H280.2176c-28.2624 0-51.2 22.9376-51.2 51.2s22.9376 51.2 51.2 51.2h85.1456v85.1456c0 28.2624 22.9376 51.2 51.2 51.2s51.2-22.9376 51.2-51.2v-85.1456H552.96c28.2624 0 51.2-22.9376 51.2-51.2s-22.9376-51.2-51.2-51.2z"
                              fill="#FFDF99" p-id="22008"></path>
                    </svg>
                </div>
                <div id="format" class="request-type-json-format">
                    <svg t="1699780218652" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="29477" width="200" height="200">
                        <path d="M0 0m136.533333 0l750.933334 0q136.533333 0 136.533333 136.533333l0 750.933334q0 136.533333-136.533333 136.533333l-750.933334 0q-136.533333 0-136.533333-136.533333l0-750.933334q0-136.533333 136.533333-136.533333Z"
                              fill="#FFC738" p-id="29478"></path>
                        <path d="M458.533547 324.07552l-80.554667-10.704213-36.0448-66.60096-36.099413 66.60096-80.554667 10.704213 58.272427 51.882667-13.666987 73.23648 72.04864-34.57024 72.04864 34.57024-13.735253-73.23648z"
                              fill="#EAB83A" p-id="29479"></path>
                        <path d="M799.061333 782.336l-66.628266 39.1168c-12.588373 7.386453-22.89664-0.300373-22.89664-17.08032v-78.506667a51.52768 51.52768 0 0 1 23.442773-42.51648l65.536-33.50528c12.888747-6.608213 23.442773 1.733973 23.442773 18.51392v70.014294a55.66464 55.66464 0 0 1-22.89664 43.963733z m-2.921813-144.861867L726.357333 674.474667a56.64768 56.64768 0 0 1-47.22688 0l-72.21248-38.229334a13.312 13.312 0 0 1-0.2048-25.613653l67.447467-37.860693a54.613333 54.613333 0 0 1 47.02208-0.546134l74.943147 40.05888a12.970667 12.970667 0 0 1 0.013653 25.1904z m-116.381013-117.650773l-26.815147-30.037333-39.908693 5.010773 20.261546-34.679467-17.134933-36.427093 39.335253 8.56064 29.354667-27.538773 4.027733 40.045226 35.26656 19.401387-36.864 16.192853z m21.722453-167.44448L669.682347 327.68l-38.393174 12.151467 13.653334-37.84704-23.42912-32.768 40.236373 1.365333 23.906987-32.385707 11.18208 38.66624 38.229333 12.724907-33.286827 22.555307zM353.621333 790.801067a39.840427 39.840427 0 0 1-55.05024 10.390186l-17.312426-11.851093a39.594667 39.594667 0 0 1-10.390187-54.872747l213.947733-312.456533a39.826773 39.826773 0 0 1 55.05024-10.390187l17.353387 11.83744a39.594667 39.594667 0 0 1 10.36288 54.8864z m187.419307-343.927467l-14.158507-9.557333-3.140266-2.184534a11.01824 11.01824 0 0 0-15.428267 2.90816L480.13312 479.232l35.607893 24.234667 28.166827-41.178454a11.168427 11.168427 0 0 0-2.894507-15.428266z m9.038507-123.767467l-19.8656-3.249493-13.953707 14.513493-3.03104-19.879253-18.077013-8.833707 17.98144-9.05216 2.730666-19.879253 14.158507 14.29504 19.810987-3.536213-9.216 17.885866z m-108.270934 105.608534l-100.88448-19.797334-73.5232 71.857494-12.288-102.004054-91.067733-47.7184 93.252267-43.29472 17.257813-101.321386 69.986987 75.28448 101.730986-14.90944-50.025813 89.770666z m-22.28224-164.345174l-80.254293 12.77952-53.589333-53.507413-15.48288 74.1376-74.1376 33.286827 70.683306 33.041066 7.7824 74.069334 59.159894-53.73952 78.92992 12.520106-34.133334-66.259626zM604.678827 649.6256l65.194666 32.058027a50.681173 50.681173 0 0 1 23.606614 42.420906v79.694507c0 16.930133-10.40384 24.94464-23.087787 17.749333l-66.218667-37.382826a54.6816 54.6816 0 0 1-23.087786-43.854507V668.8768c-0.013653-16.971093 10.622293-25.627307 23.59296-19.2512zM791.893333 955.733333v-27.306666h109.226667v-13.653334h-13.653333v-13.653333h-13.653334v-13.653333h-13.653333v-13.653334h-13.653333v-13.653333h-13.653334v-13.653333h-13.653333v-13.653334h-13.653333v-13.653333h-13.653334v-13.653333h13.653334v-13.653334h13.653333v13.653334h13.653333v13.653333h13.653334v13.653333h13.653333v13.653334h13.653333v13.653333h13.653334v13.653333h13.653333v13.653334h13.653333v13.653333h13.653334v-109.226667h27.306666v163.84H791.893333z m70.314667-68.266666zM860.16 887.466667z"
                              fill="#30384F" p-id="29480"></path>
                    </svg>
                </div>
            </div>
            <div style="display: none" id="request-header" class="request-header">
                <table>
                    <tr>
                        <th></th>
                        <th>参数名</th>
                        <th>示例值</th>
                        <th>说明</th>
                    </tr>

                    <tr>
                        <td>
                            <input type="checkbox" checked/>
                        </td>
                        <td>
                            <input value="Auth-Token"/>
                        </td>
                        <td>
                            <input value="f2fd0a0b-f9ed-439a-acfb-18"/>
                        </td>
                        <td>
                            <input value="令牌参数"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="display: none" id="request-settings" class="request-settings">
                <div class="setting-ssl">
                    <div class="setting-ssl-title">
                        SSL 证书验证
                    </div>
                    <div class="setting-ssl-radio">
                        <input id="setting-ssl-radio-1" type="radio"/>
                        <input id="setting-ssl-radio-2" type="radio"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-response"></div>
        <div id="global-tip" class="global-tip">
            <span style="color: red; font-weight: bolder; margin-right: 6px">!</span>抱歉，暂时不在服务区~
        </div>
        <div id="global-tip-copy-success" class="global-tip">
            <span style="color: #0ae70a; font-weight: bolder; margin-right: 6px">✔</span>复制成功!
        </div>
        <div id="global-tip-format-success" class="global-tip">
            <span style="color: #0ae70a; font-weight: bolder; margin-right: 6px">✔</span>格式化成功!
        </div>
    </div>

    <script type="text/javascript">

        document.addEventListener("DOMContentLoaded", function () {

            // 控制 api-item 点击选中样式
            var apiItem01 = document.getElementById("api-item-01")
            var apiItem02 = document.getElementById("api-item-02")
            var apiItem03 = document.getElementById("api-item-03")
            var apiItem04 = document.getElementById("api-item-04")
            // 设置默认选中第一个
            apiItem01.style.background = "#0a3b70";
            apiItem01.childNodes[3].style.color = "white"
            // 初始化默认伪类样式
            apiItem01.classList.add('custom-api-item')
            // 动态监听每一个
            apiItem01.onclick = function () {
                apiItem01.classList.add('custom-api-item')
                apiItem02.classList.remove('custom-api-item')
                apiItem03.classList.remove('custom-api-item')
                apiItem04.classList.remove('custom-api-item')
                apiItem01.style.background = "#0a3b70";
                apiItem01.childNodes[3].style.color = "white"
                apiItem02.style.background = "";
                apiItem02.childNodes[3].style.color = "#198710";
                apiItem03.style.background = "";
                apiItem03.childNodes[3].style.color = "#198710";
                apiItem04.style.background = "";
                apiItem04.childNodes[3].style.color = "#198710";

                // 同时控制 right-top-tab 点击选中样式
                var rightTopTab01 = document.getElementById("right-top-tab-01")
                rightTopTab01.style.display = 'flex'
                var rightTopTab02 = document.getElementById("right-top-tab-02")
                var rightTopTab03 = document.getElementById("right-top-tab-03")
                var rightTopTab04 = document.getElementById("right-top-tab-04")
                rightTopTab01.style.background = "white";
                rightTopTab01.style.border = "#1890ff 1px solid";
                rightTopTab01.childNodes[3].style.color = "blue"
                rightTopTab01.childNodes[5].childNodes[1].style.color = "blue"
                rightTopTab02.style.background = "";
                rightTopTab02.childNodes[3].style.color = "white"
                rightTopTab02.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab03.style.background = "";
                rightTopTab03.childNodes[3].style.color = "white"
                rightTopTab03.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab04.style.background = "";
                rightTopTab04.childNodes[3].style.color = "white"
                rightTopTab04.childNodes[5].childNodes[1].style.color = "white"
            }
            apiItem02.onclick = function () {
                apiItem01.classList.remove('custom-api-item')
                apiItem02.classList.add('custom-api-item')
                apiItem03.classList.remove('custom-api-item')
                apiItem04.classList.remove('custom-api-item')
                apiItem01.style.background = "";
                apiItem01.childNodes[3].style.color = "#198710";
                apiItem02.style.background = "#0a3b70";
                apiItem02.childNodes[3].style.color = "white"
                apiItem03.style.background = "";
                apiItem03.childNodes[3].style.color = "#198710";
                apiItem04.style.background = "";
                apiItem04.childNodes[3].style.color = "#198710";

                // 同时控制 right-top-tab 点击选中样式
                var rightTopTab01 = document.getElementById("right-top-tab-01")
                var rightTopTab02 = document.getElementById("right-top-tab-02")
                rightTopTab02.style.display = 'flex'
                var rightTopTab03 = document.getElementById("right-top-tab-03")
                var rightTopTab04 = document.getElementById("right-top-tab-04")
                rightTopTab01.style.background = "";
                rightTopTab01.childNodes[3].style.color = "white"
                rightTopTab01.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab02.style.background = "white";
                rightTopTab02.style.border = "#1890ff 1px solid";
                rightTopTab02.childNodes[3].style.color = "blue"
                rightTopTab02.childNodes[5].childNodes[1].style.color = "blue"
                rightTopTab03.style.background = "";
                rightTopTab03.childNodes[3].style.color = "white"
                rightTopTab03.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab04.style.background = "";
                rightTopTab04.childNodes[3].style.color = "white"
                rightTopTab04.childNodes[5].childNodes[1].style.color = "white"
            }
            apiItem03.onclick = function () {
                apiItem01.classList.remove('custom-api-item')
                apiItem02.classList.remove('custom-api-item')
                apiItem03.classList.add('custom-api-item')
                apiItem04.classList.remove('custom-api-item')
                apiItem01.style.background = "";
                apiItem01.childNodes[3].style.color = "#198710";
                apiItem02.style.background = "";
                apiItem02.childNodes[3].style.color = "#198710";
                apiItem03.style.background = "#0a3b70";
                apiItem03.childNodes[3].style.color = "white"
                apiItem04.style.background = "";
                apiItem04.childNodes[3].style.color = "#198710";

                // 同时控制 right-top-tab 点击选中样式
                var rightTopTab01 = document.getElementById("right-top-tab-01")
                var rightTopTab02 = document.getElementById("right-top-tab-02")
                var rightTopTab03 = document.getElementById("right-top-tab-03")
                rightTopTab03.style.display = 'flex'
                var rightTopTab04 = document.getElementById("right-top-tab-04")
                rightTopTab01.style.background = "";
                rightTopTab01.childNodes[3].style.color = "white"
                rightTopTab01.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab02.style.background = "";
                rightTopTab02.childNodes[3].style.color = "white"
                rightTopTab02.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab03.style.background = "white";
                rightTopTab03.style.border = "#1890ff 1px solid";
                rightTopTab03.childNodes[3].style.color = "blue"
                rightTopTab03.childNodes[5].childNodes[1].style.color = "blue"
                rightTopTab04.style.background = "";
                rightTopTab04.childNodes[3].style.color = "white"
                rightTopTab04.childNodes[5].childNodes[1].style.color = "white"
            }
            apiItem04.onclick = function () {
                apiItem01.classList.remove('custom-api-item')
                apiItem02.classList.remove('custom-api-item')
                apiItem03.classList.remove('custom-api-item')
                apiItem04.classList.add('custom-api-item')
                apiItem01.style.background = "";
                apiItem01.childNodes[3].style.color = "#198710";
                apiItem02.style.background = "";
                apiItem02.childNodes[3].style.color = "#198710";
                apiItem03.style.background = "";
                apiItem03.childNodes[3].style.color = "#198710";
                apiItem04.style.background = "#0a3b70";
                apiItem04.childNodes[3].style.color = "white"

                // 同时控制 right-top-tab 点击选中样式
                var rightTopTab01 = document.getElementById("right-top-tab-01")
                var rightTopTab02 = document.getElementById("right-top-tab-02")
                var rightTopTab03 = document.getElementById("right-top-tab-03")
                var rightTopTab04 = document.getElementById("right-top-tab-04")
                rightTopTab04.style.display = 'flex'
                rightTopTab01.style.background = "";
                rightTopTab01.childNodes[3].style.color = "white"
                rightTopTab01.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab02.style.background = "";
                rightTopTab02.childNodes[3].style.color = "white"
                rightTopTab02.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab03.style.background = "";
                rightTopTab03.childNodes[3].style.color = "white"
                rightTopTab03.childNodes[5].childNodes[1].style.color = "white"
                rightTopTab04.style.background = "white";
                rightTopTab04.style.border = "#1890ff 1px solid";
                rightTopTab04.childNodes[3].style.color = "blue"
                rightTopTab04.childNodes[5].childNodes[1].style.color = "blue"
            }

            // 控制 right-top-tab 点击选中样式
            var rightTopTab01 = document.getElementById("right-top-tab-01")
            var rightTopTab02 = document.getElementById("right-top-tab-02")
            var rightTopTab03 = document.getElementById("right-top-tab-03")
            var rightTopTab04 = document.getElementById("right-top-tab-04")
            // 设置默认选中第一个
            rightTopTab01.style.background = "white";
            rightTopTab01.style.border = "#1890ff 1px solid";
            rightTopTab01.childNodes[3].style.color = "blue"
            rightTopTab01.childNodes[5].childNodes[1].style.color = "blue"
            // 动态监听每一个
            rightTopTab01.onclick = function () {
                rightTopTab01.style.background = "white";
                rightTopTab01.style.border = "#1890ff 1px solid";
                rightTopTab01.childNodes[3].style.color = "blue"
                rightTopTab01.childNodes[5].childNodes[1].style.color = "gray"
                rightTopTab02.style.background = "#0a3b70";
                rightTopTab02.childNodes[3].style.color = "white"
                rightTopTab03.style.background = "#0a3b70";
                rightTopTab03.childNodes[3].style.color = "white"
                rightTopTab04.style.background = "#0a3b70";
                rightTopTab04.childNodes[3].style.color = "white"
            }
            rightTopTab02.onclick = function () {
                rightTopTab01.style.background = "#0a3b70";
                rightTopTab01.childNodes[3].style.color = "white"
                rightTopTab02.style.background = "white";
                rightTopTab02.style.border = "#1890ff 1px solid";
                rightTopTab02.childNodes[3].style.color = "blue"
                rightTopTab02.childNodes[5].childNodes[1].style.color = "blue"
                rightTopTab03.style.background = "#0a3b70";
                rightTopTab03.childNodes[3].style.color = "white"
                rightTopTab04.style.background = "#0a3b70";
                rightTopTab04.childNodes[3].style.color = "white"
            }
            rightTopTab03.onclick = function () {
                rightTopTab01.style.background = "#0a3b70";
                rightTopTab01.childNodes[3].style.color = "white"
                rightTopTab02.style.background = "#0a3b70";
                rightTopTab02.childNodes[3].style.color = "white"
                rightTopTab03.style.background = "white";
                rightTopTab03.style.border = "#1890ff 1px solid";
                rightTopTab03.childNodes[3].style.color = "blue"
                rightTopTab03.childNodes[5].childNodes[1].style.color = "blue"
                rightTopTab04.style.background = "#0a3b70";
                rightTopTab04.childNodes[3].style.color = "white"
            }
            rightTopTab04.onclick = function () {
                rightTopTab01.style.background = "#0a3b70";
                rightTopTab01.childNodes[3].style.color = "white"
                rightTopTab02.style.background = "#0a3b70";
                rightTopTab02.childNodes[3].style.color = "white"
                rightTopTab03.style.background = "#0a3b70";
                rightTopTab03.childNodes[3].style.color = "white"
                rightTopTab04.style.background = "white";
                rightTopTab04.style.border = "#1890ff 1px solid";
                rightTopTab04.childNodes[3].style.color = "blue"
                rightTopTab04.childNodes[5].childNodes[1].style.color = "blue"
            }

            // 控制 select-tab 点击选中样式
            var div01 = document.getElementById("select-item-01")
            var div02 = document.getElementById("select-item-02")
            var div03 = document.getElementById("select-item-03")
            var div04 = document.getElementById("select-item-04")
            var div05 = document.getElementById("select-item-05")
            // 设置默认选中第一个
            div04.style.borderBottom = "red 3px solid";
            // 设置默认控制 request-body 展示
            document.getElementById("request-body").style.display = "block"
            document.getElementById("params").style.display = "none"
            document.getElementById("authorization").style.display = "none"
            document.getElementById("request-header").style.display = "none"
            document.getElementById("request-settings").style.display = "none"
            // 动态监听每一个
            div01.onclick = function () {
                div01.style.borderBottom = "red 3px solid";
                div02.style.borderBottom = "";
                div03.style.borderBottom = "";
                div04.style.borderBottom = "";
                div05.style.borderBottom = "";
                // 控制 request-body 展示
                document.getElementById("params").style.display = "flex"
                document.getElementById("authorization").style.display = "none"
                document.getElementById("request-body").style.display = "none"
                document.getElementById("request-header").style.display = "none"
                document.getElementById("request-settings").style.display = "none"
            }
            div02.onclick = function () {
                div02.style.borderBottom = "red 3px solid";
                div01.style.borderBottom = "";
                div03.style.borderBottom = "";
                div04.style.borderBottom = "";
                div05.style.borderBottom = "";
                // 控制 request-body 展示
                document.getElementById("authorization").style.display = "flex"
                document.getElementById("params").style.display = "none"
                document.getElementById("request-body").style.display = "none"
                document.getElementById("request-header").style.display = "none"
                document.getElementById("request-settings").style.display = "none"
            }
            div03.onclick = function () {
                div03.style.borderBottom = "red 3px solid";
                div01.style.borderBottom = "";
                div02.style.borderBottom = "";
                div04.style.borderBottom = "";
                div05.style.borderBottom = "";
                // 控制 request-body 展示
                document.getElementById("request-header").style.display = "flex"
                document.getElementById("params").style.display = "none"
                document.getElementById("authorization").style.display = "none"
                document.getElementById("request-body").style.display = "none"
                document.getElementById("request-settings").style.display = "none"
            }
            div04.onclick = function () {
                div04.style.borderBottom = "red 3px solid";
                div01.style.borderBottom = "";
                div02.style.borderBottom = "";
                div03.style.borderBottom = "";
                div05.style.borderBottom = "";
                // 控制 request-body 展示
                document.getElementById("request-body").style.display = "block"
                document.getElementById("params").style.display = "none"
                document.getElementById("authorization").style.display = "none"
                document.getElementById("request-header").style.display = "none"
                document.getElementById("request-settings").style.display = "none"
            }
            div05.onclick = function () {
                div05.style.borderBottom = "red 3px solid";
                div01.style.borderBottom = "";
                div02.style.borderBottom = "";
                div03.style.borderBottom = "";
                div04.style.borderBottom = "";
                // 控制 request-body 展示
                document.getElementById("request-settings").style.display = "flex"
                document.getElementById("params").style.display = "none"
                document.getElementById("authorization").style.display = "none"
                document.getElementById("request-body").style.display = "none"
                document.getElementById("request-header").style.display = "none"
            }

            // 控制 tab-close-x 页签删除事件
            var tabCloseX01 = document.getElementById("tab-close-x-01")
            var tabCloseX02 = document.getElementById("tab-close-x-02")
            var tabCloseX03 = document.getElementById("tab-close-x-03")
            var tabCloseX04 = document.getElementById("tab-close-x-04")
            tabCloseX01.onclick = function () {
                // 获取 right-top, 判断是否只剩最后一个页签, 如果只剩最后一个页签, 则不能删除
                var rightTop = document.getElementById("right-top")
                var childrenLength = rightTop.children.length || 0
                if (childrenLength > 1) {
                    // 删除该页签
                    tabCloseX01.parentNode.parentNode.style.display = 'none'
                }
            }
            tabCloseX02.onclick = function () {
                // 获取 right-top, 判断是否只剩最后一个页签, 如果只剩最后一个页签, 则不能删除
                var rightTop = document.getElementById("right-top")
                var childrenLength = rightTop.children.length || 0
                if (childrenLength > 1) {
                    // 删除该页签
                    tabCloseX02.parentNode.parentNode.style.display = 'none'
                }
            }
            tabCloseX03.onclick = function () {
                // 获取 right-top, 判断是否只剩最后一个页签, 如果只剩最后一个页签, 则不能删除
                var rightTop = document.getElementById("right-top")
                var childrenLength = rightTop.children.length || 0
                if (childrenLength > 1) {
                    // 删除该页签
                    tabCloseX03.parentNode.parentNode.style.display = 'none'
                }
            }
            tabCloseX04.onclick = function () {
                // 获取 right-top, 判断是否只剩最后一个页签, 如果只剩最后一个页签, 则不能删除
                var rightTop = document.getElementById("right-top")
                var childrenLength = rightTop.children.length || 0
                if (childrenLength > 1) {
                    // 删除该页签
                    tabCloseX04.parentNode.parentNode.style.display = 'none'
                }
            }

            // 控制 request-type-select-item 点击选中样式
            var requestTypeSelectItem01 = document.getElementById("request-type-select-item-01")
            var requestTypeSelectItem02 = document.getElementById("request-type-select-item-02")
            var requestTypeSelectItem03 = document.getElementById("request-type-select-item-03")
            var requestTypeSelectItem04 = document.getElementById("request-type-select-item-04")
            var requestTypeSelectItem05 = document.getElementById("request-type-select-item-05")
            var requestTypeSelectItem06 = document.getElementById("request-type-select-item-06")
            var requestTypeSelectItem07 = document.getElementById("request-type-select-item-07")
            var requestTypeSelectItem08 = document.getElementById("request-type-select-item-08")
            // 设置默认选中第一个
            requestTypeSelectItem04.style.background = "blue";
            requestTypeSelectItem04.style.color = "white";
            // 动态监听每一个
            requestTypeSelectItem01.onclick = function () {
                requestTypeSelectItem01.style.background = "blue";
                requestTypeSelectItem01.style.color = "white";
                // 设置其他互斥样式
                requestTypeSelectItem02.style.background = "";
                requestTypeSelectItem02.style.color = "gray";
                requestTypeSelectItem03.style.background = "";
                requestTypeSelectItem03.style.color = "gray";
                requestTypeSelectItem04.style.background = "";
                requestTypeSelectItem04.style.color = "gray";
                requestTypeSelectItem05.style.background = "";
                requestTypeSelectItem05.style.color = "gray";
                requestTypeSelectItem06.style.background = "";
                requestTypeSelectItem06.style.color = "gray";
                requestTypeSelectItem07.style.background = "";
                requestTypeSelectItem07.style.color = "gray";
                requestTypeSelectItem08.style.background = "";
                requestTypeSelectItem08.style.color = "gray";
            }
            requestTypeSelectItem02.onclick = function () {
                requestTypeSelectItem02.style.background = "blue";
                requestTypeSelectItem02.style.color = "white";
                // 设置其他互斥样式
                requestTypeSelectItem01.style.background = "";
                requestTypeSelectItem01.style.color = "gray";
                requestTypeSelectItem03.style.background = "";
                requestTypeSelectItem03.style.color = "gray";
                requestTypeSelectItem04.style.background = "";
                requestTypeSelectItem04.style.color = "gray";
                requestTypeSelectItem05.style.background = "";
                requestTypeSelectItem05.style.color = "gray";
                requestTypeSelectItem06.style.background = "";
                requestTypeSelectItem06.style.color = "gray";
                requestTypeSelectItem07.style.background = "";
                requestTypeSelectItem07.style.color = "gray";
                requestTypeSelectItem08.style.background = "";
                requestTypeSelectItem08.style.color = "gray";
            }
            requestTypeSelectItem03.onclick = function () {
                requestTypeSelectItem03.style.background = "blue";
                requestTypeSelectItem03.style.color = "white";
                // 设置其他互斥样式
                requestTypeSelectItem01.style.background = "";
                requestTypeSelectItem01.style.color = "gray";
                requestTypeSelectItem02.style.background = "";
                requestTypeSelectItem02.style.color = "gray";
                requestTypeSelectItem04.style.background = "";
                requestTypeSelectItem04.style.color = "gray";
                requestTypeSelectItem05.style.background = "";
                requestTypeSelectItem05.style.color = "gray";
                requestTypeSelectItem06.style.background = "";
                requestTypeSelectItem06.style.color = "gray";
                requestTypeSelectItem07.style.background = "";
                requestTypeSelectItem07.style.color = "gray";
                requestTypeSelectItem08.style.background = "";
                requestTypeSelectItem08.style.color = "gray";
            }
            requestTypeSelectItem04.onclick = function () {
                requestTypeSelectItem04.style.background = "blue";
                requestTypeSelectItem04.style.color = "white";
                // 设置其他互斥样式
                requestTypeSelectItem01.style.background = "";
                requestTypeSelectItem01.style.color = "gray";
                requestTypeSelectItem02.style.background = "";
                requestTypeSelectItem02.style.color = "gray";
                requestTypeSelectItem03.style.background = "";
                requestTypeSelectItem03.style.color = "gray";
                requestTypeSelectItem05.style.background = "";
                requestTypeSelectItem05.style.color = "gray";
                requestTypeSelectItem06.style.background = "";
                requestTypeSelectItem06.style.color = "gray";
                requestTypeSelectItem07.style.background = "";
                requestTypeSelectItem07.style.color = "gray";
                requestTypeSelectItem08.style.background = "";
                requestTypeSelectItem08.style.color = "gray";
            }
            requestTypeSelectItem05.onclick = function () {
                requestTypeSelectItem05.style.background = "blue";
                requestTypeSelectItem05.style.color = "white";
                // 设置其他互斥样式
                requestTypeSelectItem01.style.background = "";
                requestTypeSelectItem01.style.color = "gray";
                requestTypeSelectItem02.style.background = "";
                requestTypeSelectItem02.style.color = "gray";
                requestTypeSelectItem03.style.background = "";
                requestTypeSelectItem03.style.color = "gray";
                requestTypeSelectItem04.style.background = "";
                requestTypeSelectItem04.style.color = "gray";
                requestTypeSelectItem06.style.background = "";
                requestTypeSelectItem06.style.color = "gray";
                requestTypeSelectItem07.style.background = "";
                requestTypeSelectItem07.style.color = "gray";
                requestTypeSelectItem08.style.background = "";
                requestTypeSelectItem08.style.color = "gray";
            }
            requestTypeSelectItem06.onclick = function () {
                requestTypeSelectItem06.style.background = "blue";
                requestTypeSelectItem06.style.color = "white";
                // 设置其他互斥样式
                requestTypeSelectItem01.style.background = "";
                requestTypeSelectItem01.style.color = "gray";
                requestTypeSelectItem02.style.background = "";
                requestTypeSelectItem02.style.color = "gray";
                requestTypeSelectItem03.style.background = "";
                requestTypeSelectItem03.style.color = "gray";
                requestTypeSelectItem04.style.background = "";
                requestTypeSelectItem04.style.color = "gray";
                requestTypeSelectItem05.style.background = "";
                requestTypeSelectItem05.style.color = "gray";
                requestTypeSelectItem07.style.background = "";
                requestTypeSelectItem07.style.color = "gray";
                requestTypeSelectItem08.style.background = "";
                requestTypeSelectItem08.style.color = "gray";
            }
            requestTypeSelectItem07.onclick = function () {
                requestTypeSelectItem07.style.background = "blue";
                requestTypeSelectItem07.style.color = "white";
                // 设置其他互斥样式
                requestTypeSelectItem01.style.background = "";
                requestTypeSelectItem01.style.color = "gray";
                requestTypeSelectItem02.style.background = "";
                requestTypeSelectItem02.style.color = "gray";
                requestTypeSelectItem03.style.background = "";
                requestTypeSelectItem03.style.color = "gray";
                requestTypeSelectItem04.style.background = "";
                requestTypeSelectItem04.style.color = "gray";
                requestTypeSelectItem05.style.background = "";
                requestTypeSelectItem05.style.color = "gray";
                requestTypeSelectItem06.style.background = "";
                requestTypeSelectItem06.style.color = "gray";
                requestTypeSelectItem08.style.background = "";
                requestTypeSelectItem08.style.color = "gray";
            }
            requestTypeSelectItem08.onclick = function () {
                requestTypeSelectItem08.style.background = "blue";
                requestTypeSelectItem08.style.color = "white";
                // 设置其他互斥样式
                requestTypeSelectItem01.style.background = "";
                requestTypeSelectItem01.style.color = "gray";
                requestTypeSelectItem02.style.background = "";
                requestTypeSelectItem02.style.color = "gray";
                requestTypeSelectItem03.style.background = "";
                requestTypeSelectItem03.style.color = "gray";
                requestTypeSelectItem04.style.background = "";
                requestTypeSelectItem04.style.color = "gray";
                requestTypeSelectItem05.style.background = "";
                requestTypeSelectItem05.style.color = "gray";
                requestTypeSelectItem06.style.background = "";
                requestTypeSelectItem06.style.color = "gray";
                requestTypeSelectItem07.style.background = "";
                requestTypeSelectItem07.style.color = "gray";
            }

            // 设置 json 数据
            let jsonData = {
                "userInfo": {
                    "userId": "e68045f6d2e1e02ff8c5f91818260d66",
                    "username": "小e",
                    "mobile": "13617783616",
                    "email": "112@qq.com",
                    "avatar": "http://localhost:8080/xxx.png",
                    "address": "广东省深圳深圳市xxx",
                    "roles": ["admin", "guest"]
                },
                "appId": "8ff8a9a656d4f39666a8fe91d19ba75d",
                "appName": "我的",
                "appVersion": "1.0.0",
                "tenantId": "45f405607e2e537a82b610fbb27ef4f6"
            }
            document.getElementById("request-type-json").innerText = JSON.stringify(jsonData, null, 2)

            // 设置 setting-ssl-radio 单选按钮监听
            var settingSslRadio1 = document.getElementById("setting-ssl-radio-1");
            // 设置默认选中状态
            settingSslRadio1.checked = true
            settingSslRadio1.onclick = function () {
                settingSslRadio1.checked = true
                settingSslRadio2.checked = false
            }
            var settingSslRadio2 = document.getElementById("setting-ssl-radio-2");
            settingSslRadio2.onclick = function () {
                settingSslRadio2.checked = true
                settingSslRadio1.checked = false
            }

            // 点击发送按钮 send-do-button 事件监听
            var sendDoButton = document.getElementById("send-do-button")
            var globalTip = document.getElementById("global-tip")
            sendDoButton.onclick = function () {
                globalTip.style.display = 'block'
                setTimeout(() => {
                    globalTip.style.display = 'none'
                }, 2000)
            }


            // 控制 mini-item 点击选中样式
            var miniItem01 = document.getElementById("mini-item-01")
            var miniItem02 = document.getElementById("mini-item-02")
            var miniItem03 = document.getElementById("mini-item-03")

            // 设置默认激活项
            miniItem01.style.background = '#dddddd'
            miniItem01.childNodes[3].style.color = 'blue'
            miniItem02.style.background = 'white'
            miniItem02.childNodes[3].style.color = 'gray'
            miniItem03.style.background = 'white'
            miniItem03.childNodes[3].style.color = 'gray'

            miniItem01.onclick = function () {
                miniItem01.style.background = '#dddddd'
                miniItem01.childNodes[3].style.color = 'blue'
                miniItem02.style.background = 'white'
                miniItem02.childNodes[3].style.color = 'gray'
                miniItem03.style.background = 'white'
                miniItem03.childNodes[3].style.color = 'gray'
            }
            miniItem02.onclick = function () {
                miniItem02.style.background = '#dddddd'
                miniItem02.childNodes[3].style.color = 'blue'
                miniItem01.style.background = 'white'
                miniItem01.childNodes[3].style.color = 'gray'
                miniItem03.style.background = 'white'
                miniItem03.childNodes[3].style.color = 'gray'
            }
            miniItem03.onclick = function () {
                miniItem03.style.background = '#dddddd'
                miniItem03.childNodes[3].style.color = 'blue'
                miniItem02.style.background = 'white'
                miniItem02.childNodes[3].style.color = 'gray'
                miniItem01.style.background = 'white'
                miniItem01.childNodes[3].style.color = 'gray'
            }

            // 复制监听
            var copy = document.getElementById("copy");
            copy.onclick = function () {
                const input = document.createElement('input')
                document.body.appendChild(input)
                input.setAttribute('value', JSON.stringify(jsonData))
                input.select()
                if (document.execCommand('copy')) {
                    document.execCommand('copy')
                }
                document.body.removeChild(input)
                var globalTip = document.getElementById("global-tip-copy-success")
                globalTip.style.display = 'block'
                setTimeout(() => {
                    globalTip.style.display = 'none'
                }, 2000)
            }
            // 格式化监听
            var format = document.getElementById("format");
            format.onclick = function () {
                var globalTip = document.getElementById("global-tip-format-success")
                globalTip.style.display = 'block'
                setTimeout(() => {
                    globalTip.style.display = 'none'
                }, 2000)
            }

        })

    </script>


</body>

</html>